<template>
  <div class="text-carousel" v-show="showPanel">
    <transition-group name="carousel" tag="div" class="carousel-container">
      <div class="text-carousel-item" :key="currentIndex" v-show="currentIndex === getCurrentItemIndex()">
        {{ getCurrentItem() }}
      </div>
    </transition-group>
  </div>
  <button class="manage-button" v-show="!showPanel" @click="openManageLink">管理</button>
  <button class="back-button" v-show="!showPanel" @click="backToMain">返回</button>
  <table class="detail-table" v-show="!showPanel">
    <thead>
      <tr>
        <th>楼栋号</th>
        <th>房屋类型</th>
        <th>面积(m²)</th>
        <th>状态</th>
        <th>价格(万元)</th>
        <th>预售证状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>B1栋</td>
        <td>多层住宅</td>
        <td>85</td>
        <td>
          <span class="status 在售">在售</span>
        </td>
        <td>115</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B2栋</td>
        <td>高层住宅</td>
        <td>105</td>
        <td>
          <span class="status 在售">在售</span>
        </td>
        <td>140</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B3栋</td>
        <td>多层住宅</td>
        <td>92</td>
        <td>
          <span class="status 尾盘">尾盘</span>
        </td>
        <td>122</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B4栋</td>
        <td>高层住宅</td>
        <td>120</td>
        <td>
          <span class="status 待售">待售</span>
        </td>
        <td>160</td>
        <td>
          <span class="license 未办理">未办理</span>
        </td>
      </tr>
      <tr>
        <td>B5栋</td>
        <td>多层住宅</td>
        <td>95</td>
        <td>
          <span class="status 已售">已售</span>
        </td>
        <td>130</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B6栋</td>
        <td>高层住宅</td>
        <td>110</td>
        <td>
          <span class="status 在售">在售</span>
        </td>
        <td>150</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B7栋</td>
        <td>多层住宅</td>
        <td>88</td>
        <td>
          <span class="status 尾盘">尾盘</span>
        </td>
        <td>125</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B8栋</td>
        <td>高层住宅</td>
        <td>115</td>
        <td>
          <span class="status 待售">待售</span>
        </td>
        <td>155</td>
        <td>
          <span class="license 未办理">未办理</span>
        </td>
      </tr>
      <tr>
        <td>B9栋</td>
        <td>多层住宅</td>
        <td>90</td>
        <td>
          <span class="status 已售">已售</span>
        </td>
        <td>128</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
      <tr>
        <td>B10栋</td>
        <td>高层住宅</td>
        <td>118</td>
        <td>
          <span class="status 在售">在售</span>
        </td>
        <td>158</td>
        <td>
          <span class="license 已办理">已办理</span>
        </td>
      </tr>
    </tbody>
  </table>
  <main-view @mapLoaded="mapLoaded" :url="sceneUrl" :showPanel="showPanel" />
</template>

<script setup lang="ts">
import * as mars3d from "mars3d"
// import HuxingLayer from "./HuxingLayer.js"
import { computed, ref } from "vue"
import MainView from "@mars/components/mars-work/main-view.vue"
import { getQueryString } from "@mars/utils/mars-util"

const sceneUrl = computed(() => getQueryString("url"))

const showPanel = ref(true)

// 管理链接
const openManageLink = () => {
  window.open("/manager.html", "managerWindow", "width=1280,height=960,top=50,left=50,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes")
}

// 轮播数据
const carouselData = ref([
  "蟠龙观邸小区原立项名称为蟠龙新居保障性住房小区，项目分为A-F六个区，占地约760亩",
  "蟠龙观邸共计98栋构筑物，全区共计9139套房屋，其中商品房5267套",
  "目前已办理预售证的房屋为32栋，2221套房屋",
  "蟠龙观邸共有商品房5267套，已销售房屋1536套（工程款抵账305套，安置房201套）",
  "D区全部1114套商品房、E区全部852套商品房，未办理预售证，也未进行销售",
  "A、B、C、F区多层主要以尾盘居多，多数房源未办理预售证",
  "C区所售房屋承诺交房时间为2020年底，实际交付583套",
  "剩余购房客户经电话、短信及公众号多次通知但仍未交房领取钥匙"
])

// 状态管理
const currentIndex = ref(0)
const timer = ref<number | null>(null)
const isAnimating = ref(false)
const isPaused = ref(false)

// 配置参数
const CONFIG = {
  INTERVAL: 5000, // 轮播间隔时间（毫秒）
  ANIMATION_DURATION: 500, // 动画持续时间（毫秒）
  DEBOUNCE_DELAY: 100 // 防抖延迟时间（毫秒）
}

const getCurrentItem = (): string => {
  if (carouselData.value.length === 0) { return "" }
  return carouselData.value[currentIndex.value]
}

// 获取当前项目索引（用于动画）
const getCurrentItemIndex = (): number => {
  return currentIndex.value
}

// 切换到下一项
const nextItem = (): void => {
  if (isAnimating.value || isPaused.value) { return }

  try {
    isAnimating.value = true

    setTimeout(() => {
      currentIndex.value = (currentIndex.value + 1) % carouselData.value.length
      isAnimating.value = false
    }, CONFIG.ANIMATION_DURATION)
  } catch (error) {
    console.error("轮播切换出错:", error)
    isAnimating.value = false
  }
}

// 启动轮播
const startCarousel = (): void => {
  if (timer.value) { clearInterval(timer.value) }
  timer.value = window.setInterval(() => {
    nextItem()
  }, CONFIG.INTERVAL)
}

let ALayer: any = null
let BLayer: any = null
let CLayer: any = null
let DLayer: any = null
let ELayer: any = null
let FLayer: any = null
let panlongLayer: any = null
let BDetailLayer: any = null

let mapInstance: any = null

// @ts-ignore
window.goMap = (name: string) => {
  showPanel.value = false
  if (mapInstance) {
    FLayer?.closeTooltip()
    mapInstance.setCameraView(
      { lat: 34.397618, lng: 107.226267, alt: 1235.1, heading: 9, pitch: -25.3 }
    )
    FLayer?.unbindTooltip()
    addBDetailLayer()
  }
}

const addBDetailLayer = () => {
  if (BDetailLayer) {
    BDetailLayer.show = true
    return
  }
  BDetailLayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/detail2.json",
    name: "B区详情",
    flyTo: false,
    tooltip: [
      { field: "num", name: "楼号" },
      { field: "floor", name: "层数" },
      { field: "unit", name: "单元" },
      {
        type: "html",
        html: "<label>户型</label><img src='http://test.wbqtsg.cn/static/1.jpg' style=\"width: 300px;\" >"
      }
    ]
  })
  mapInstance.addLayer(BDetailLayer)
}

const backToMain = () => {
  showPanel.value = true
  if (panlongLayer) {
    panlongLayer.flyTo({
      duration: 3
    }).then((r) => {
      BDetailLayer.show = false
      FLayer.bindTooltip(
        function (event) {
          const attr = event.graphic.attr
          return `<h3>B区</h3>
        <p>蟠龙观邸B区：部分房屋已办理预售证，所售房屋承诺交房时间为2019年底。</p>
        <div class="community-info">
        <div class="info-item">
          <span class="label">建筑面积：</span>
          <span class="value">1000平方米</span></span>
        </div>
        <div class="info-item">
          <span class="label">总楼栋数：</span>
          <span class="value">10<span class="unit">栋</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">多层: 5栋</span>
            <span class="sub-item">高层: 6栋</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">总户数：</span>
          <span class="value">100<span class="unit">套</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">商品房: 60套</span>
            <span class="sub-item">公租房: 40套</span>
          </span>
        </div>
      </div>`
        },
        {
          template: `<div class="marsBlackPanel">
                        <div class="marsBlackPanel-text">{content}</div>
                        <div class="marsBlackPanel-text"><button onclick="window.goMap('B区')">查看详情</button></div>
                      </div>`,
          // @ts-ignore
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          // @ts-ignore
          verticalOrigin: Cesium.VerticalOrigin.CENTER
        }
      )
    })
  }
}

function mapLoaded(map: any) {
  mapInstance = map
  // 启动轮播
  startCarousel()

  // 地图构造完成
  panlongLayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/panlong.json",
    name: "A区",
    tooltip: "none",
    flyTo: true,
    flyToOptions: {
      duration: 10
    }
  })
  map.addLayer(panlongLayer)

  ALayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/A.json",
    name: "E区",
    flyTo: false
  })
  map.addLayer(ALayer)

  BLayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/B.json",
    name: "F区",
    flyTo: false
  })
  map.addLayer(BLayer)

  CLayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/C.json",
    name: "C区",
    flyTo: false
  })
  map.addLayer(CLayer)
  CLayer.bindTooltip(
    function (event) {
      const attr = event.graphic.attr
      return `<h3>C区</h3>
        <p>蟠龙观邸C区：部分房屋已办理预售证，所售房屋承诺交房时间为2020年底，2023年下半年已全部交房。</p>
        <div class="community-info">
        <div class="info-item">
          <span class="label">建筑面积：</span>
          <span class="value">1000平方米</span></span>
        </div>
        <div class="info-item">
          <span class="label">总楼栋数：</span>
          <span class="value">10<span class="unit">栋</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">多层: 5栋</span>
            <span class="sub-item">高层: 6栋</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">总户数：</span>
          <span class="value">100<span class="unit">套</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">商品房: 60套</span>
            <span class="sub-item">公租房: 40套</span>
          </span>
        </div>
      </div>`
    },
    {
      template: `<div class="marsBlackPanel">
                        <div class="marsBlackPanel-text">{content}</div>
                      </div>`,
      // @ts-ignore
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      // @ts-ignore
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
  )

  DLayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/D.json",
    name: "D区",
    tooltip: "all",
    flyTo: false
  })
  map.addLayer(DLayer)
  DLayer.bindTooltip(
    function (event) {
      const attr = event.graphic.attr
      return `<h3>D区</h3>
        <p>蟠龙观邸D区：全部1114套商品房，未办理预售证，也未进行销售。</p>
        <div class="community-info">
        <div class="info-item">
          <span class="label">建筑面积：</span>
          <span class="value">1000平方米</span></span>
        </div>
        <div class="info-item">
          <span class="label">总楼栋数：</span>
          <span class="value">10<span class="unit">栋</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">多层: 5栋</span>
            <span class="sub-item">高层: 6栋</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">总户数：</span>
          <span class="value">100<span class="unit">套</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">商品房: 60套</span>
            <span class="sub-item">公租房: 40套</span>
          </span>
        </div>
      </div>`
    },
    {
      template: `<div class="marsBlackPanel">
                        <div class="marsBlackPanel-text">{content}</div>
                      </div>`,
      // @ts-ignore
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      // @ts-ignore
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
  )

  ELayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/E.json",
    name: "A区",
    flyTo: false
  })
  map.addLayer(ELayer)
  ELayer.bindTooltip(
    function (event) {
      const attr = event.graphic.attr
      return `<h3>A区</h3>
        <p>蟠龙观邸A区：部分房屋已办理预售证，所售房屋承诺交房时间为2020年底，2023年下半年已全部交房。</p>
        <div class="community-info">
        <div class="info-item">
          <span class="label">建筑面积：</span>
          <span class="value">1000平方米</span></span>
        </div>
        <div class="info-item">
          <span class="label">总楼栋数：</span>
          <span class="value">10<span class="unit">栋</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">多层: 5栋</span>
            <span class="sub-item">高层: 6栋</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">总户数：</span>
          <span class="value">100<span class="unit">套</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">商品房: 60套</span>
            <span class="sub-item">公租房: 40套</span>
          </span>
        </div>
      </div>`
    },
    {
      template: `<div class="marsBlackPanel">
                        <div class="marsBlackPanel-text">{content}</div>
                      </div>`,
      // @ts-ignore
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      // @ts-ignore
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
  )

  FLayer = new mars3d.layer.GeoJsonLayer({
    url: "/layer/F.json",
    name: "B区",
    flyTo: false
  })
  map.addLayer(FLayer)
  FLayer.bindTooltip(
    function (event) {
      const attr = event.graphic.attr
      return `<h3>B区</h3>
        <p>蟠龙观邸B区：部分房屋已办理预售证，所售房屋承诺交房时间为2020年底，2023年下半年已全部交房。</p>
        <div class="community-info">
        <div class="info-item">
          <span class="label">建筑面积：</span>
          <span class="value">1000平方米</span></span>
        </div>
        <div class="info-item">
          <span class="label">总楼栋数：</span>
          <span class="value">10<span class="unit">栋</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">多层: 5栋</span>
            <span class="sub-item">高层: 6栋</span>
          </span>
        </div>
        <div class="info-item">
          <span class="label">总户数：</span>
          <span class="value">100<span class="unit">套</span></span>
          <!-- 调整子信息布局，使其与前面内容在同一行 -->
          <span class="sub-info-inline">
            <span class="sub-item">商品房: 60套</span>
            <span class="sub-item">公租房: 40套</span>
          </span>
        </div>
      </div>`
    },
    {
      template: `<div class="marsBlackPanel">
                        <div class="marsBlackPanel-text">{content}</div>
                        <div class="marsBlackPanel-text"><button onclick="window.goMap('B区')">查看详情</button></div>
                      </div>`,
      // @ts-ignore
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      // @ts-ignore
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    }
  )

  // const huxing = new HuxingLayer({
  //   url: "/layer/huxing_converted.json"
  // })
  // map.addLayer(huxing)

  // map.flyToLayer(huxing)
}
</script>

<style lang="scss" scoped>
.text-carousel {
  z-index: 10000;
  position: absolute;
  top: 120px;
  left: 50%;
  width: 744px;
  height: 43px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(218, 163, 88, 0), rgba(218, 163, 88, 0.8), rgba(218, 163, 88, 0));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: all;

  &:hover {
    background: linear-gradient(90deg, rgba(218, 163, 88, 0.1), rgba(218, 163, 88, 0.9), rgba(218, 163, 88, 0.1));
  }
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-carousel-item {
  position: absolute;
  width: 100%;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(0);
  opacity: 1;
}

// 轮播动画样式
.carousel-enter-active,
.carousel-leave-active {
  transition: all 0.5s ease-in-out;
}

.carousel-enter-from {
  transform: translateY(100%);
  opacity: 0;
}

.carousel-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.carousel-enter-to,
.carousel-leave-from {
  transform: translateY(0);
  opacity: 1;
}

.manage-button {
  position: absolute;
  right: 120px; /* 位于返回按钮左边，留出适当间距 */
  top: calc(50% - 300px); /* 与返回按钮对齐 */
  background: rgba(0, 123, 255, 0.8); /* 使用不同的背景色区分 */
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  z-index: 11; /* 确保在表格上层显示 */

  &:hover {
    background: rgba(0, 123, 255, 1);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

.back-button {
  position: absolute;
  right: 50px;
  /* 与表格右侧对齐 */
  top: calc(50% - 300px);
  /* 定位在表格上方 */
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  z-index: 11;
  /* 确保在表格上层显示 */

  &:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

.detail-table {
  width: 40%; // 宽度为屏幕的40%
  border-collapse: collapse;
  color: #fff;
  background: rgba(0, 0, 0, 0.7); // 保留背景色
  border-radius: 8px;
  overflow: hidden;
  position: absolute; // 绝对定位
  right: 50px; // 距离屏幕右侧100px
  top: 50%; // 垂直居中
  transform: translateY(-50%); // 垂直居中调整
  z-index: 10; // 确保在地图上层显示

  th,
  td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  th {
    background: rgba(0, 123, 255, 0.3);
    font-weight: bold;
  }

  tr:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* 保留状态和许可证样式 */
  .status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;

    &.在售 {
      background: #28a745;
    }

    &.待售 {
      background: #ffc107;
      color: #000;
    }

    &.尾盘 {
      background: #17a2b8;
    }

    &.已售 {
      background: #dc3545;
    }
  }

  .license {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;

    &.已办理 {
      background: #28a745;
    }

    &.未办理 {
      background: #dc3545;
    }
  }
}
</style>
